<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <!-- 通过meta标签,设定读取网络来源图片 -->
   <meta name="referrer" content="never">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="referrer" content="no-referrer">
  <title>Document</title>
  <link rel="stylesheet" href="../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="../css/base.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/reset.css">
  <link rel="stylesheet" href="../tools/swiper-4.5.3/dist/css/swiper.min.css">
  
  
</head>
<body>
	<div class="bx">
    <div class="dl">
      <ul>
        <li><a href="./register.html" class="btn btn-danger btn-lg" role="button">注册</a></li>
        <li><a name="login" href="javascript:;" class="btn btn-danger btn-lg" role="button">登录</a></li>
        <li><button name="logout" class="btn btn-danger btn-lg" role="button">退出登录</button></li>
        <li><button name="cart" href="javascript:;" class="btn btn-danger btn-lg" role="button">购物车</button></li>
      </ul>

    </div>
	  <div class="jumbotron">
		
      <div class="logo"><a href="./index.html"><img src="../img/logo.jpg" ></a>

      
        <ul>
          <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=食品酒水" role="button">食品酒水</a></li>
          <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=童装玩具" role="button">童装玩具</a></li>
          <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=家装建材" role="button">家装建材</a></li>
          <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=奶粉尿裤" role="button">奶粉尿裤</a></li>
          <li><a class="btn btn-primary btn-lg" href="./list.html?cat_one_id=其他" role="button">其他产品</a></li>
          
        </ul>
        
    </div>
   
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="https://img2.baidu.com/it/u=246402587,169286361&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://img0.baidu.com/it/u=3475570381,2768348736&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
        <div class="swiper-slide"><img src="https://img2.baidu.com/it/u=246402587,169286361&fm=26&fmt=auto&gp=0.jpg" alt=""></div>
 
      </div>
    </div>

    <div class="sp">
      <ul>
        <li>
          <p id="0" name="食品酒水">食品酒水 <span><a href="./list.html?cat_one_id=食品酒水" role="button">更多>>></a> </span></p>
        </li>
        <ol>
          <!-- <li>
            <img src="../img/1.jpg" alt="">
            <h3>青岛啤酒 经典（10度）500ml*12罐</h3>
          </li>
          <li>
            <img src="../img/1.jpg" alt="">
            <h3>青岛啤酒 经典（10度）500ml*12罐</h3>
          </li>
          <li>
            <img src="../img/1.jpg" alt="">
            <h3>青岛啤酒 经典（10度）500ml*12罐</h3>
          </li>
          <li>
            <img src="../img/1.jpg" alt="">
            <h3>青岛啤酒 经典（10度）500ml*12罐</h3>
          </li> -->
         
        </ol>
  
      </ul>


      <ul>
        <li>
          <p id="1" name="童装玩具">童装玩具 <span><a href="./list.html?cat_one_id=童装玩具" role="button">更多>>></a> </span></p>
        </li>
        <ol>
          
         
        </ol>
      </ul>


      <ul>
        <li>
          <p id="2" name="家装建材">家装建材 <span><a href="./list.html?cat_one_id=家装建材" role="button">更多>>></a> </span></p>
        </li>
        <ol>
          
        </ol>
      </ul>

      <ul>
        <li>
          <p id="3" name="奶粉尿裤">奶粉尿裤 <span><a href="./list.html?cat_one_id=奶粉尿裤" role="button">更多>>></a> </span></p>
        </li>
        <ol>
          
        </ol>
      </ul>

      <ul>
        <li>
          <p id="4" name="其他">其他产品<span><a href="./list.html?cat_one_id=其他" role="button">更多>>></a> </span></p>
        </li>
        <ol>
          
        </ol>
      </ul>

      
    </div>
                                                                                                                                                   
		</div>
    
  </div>
  <script src="../tools/jquery.min.js"></script>
  <script src="../js/cookie.js"></script>
  <script src="../tools/swiper-4.5.3/dist/js/swiper.min.js"></script>
  <script src="../js/ajax.js"></script>
  <script src="../js/tools.js"></script>
  
  <script>
    var mySwiper = new Swiper('.swiper-container', {
      autoplay: true,//可选选项，自动滑动
    })
    
    //如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
    new Swiper('.swiper-container')
    var mySwiper = document.querySelector('.swiper-container').swiper
    mySwiper.slideNext();
  </script>


  <script>
    
    //退出登录
    $('[name="logout"]').click(function(){
      //获取cookie对象
      const obj = myGetCookie();
      console.log(obj.login);
      if(obj.login === undefined){
        window.alert('没有登录，先登录');
      }else{
        mySetCookie('login',1,-1,'/');
        window.alert('已退出登录');
      }
    })

    //购物车
    $('[name="cart"]').click(function(){
      const obj = myGetCookie();
      if(obj.login === undefined){
        //没有登录 先登录
        if(window.confirm('先登录,点击跳转首页')){
          window.location.href=`./login.html?url=${window.location.href}`;
        }
      }else{
          window.location.href='./cart.html';
      }
    })
 
 //登陆页面
    $('[name="login"]').click(function(){
      window.location.href=`./login.html?url=${window.location.href}`;
    })

    /* 动态渲染 */

  //定义数据
  
  var oP = document.querySelectorAll('p');
  console.dir( oP );
  
 

  // console.log(oP[0].getAttribute('name'));

for(let i=0;i<=oP.length-1;i++){
  const urlObj = oP[i].getAttribute('name');
  console.log(urlObj);
  console.log(oP[i].id)
  
 //当前是第几页，初始显示第一页内容
 let page = 1;
  //当前每页显示几条数据
  let line = 4;

  //调用函数 动态生成页面
  setPage();
  //设定一个函数动态生成页面
  function setPage(){
    //发送请求
   //promise


    const p = pjQueryAjax('../server/goods_list.php','get',{cat_one_id:urlObj,page:page,line:line},'json');
    p.then((res)=>{
      console.log(res);
        //根据数据动态渲染生成页面
        let str = '';
        res.data.forEach(item=>{
          str +=`
            

         
          <li>
            <img src="${item.goods_big_logo}" alt="">
            <h3><a href="./detail.html?goods_id=${item.goods_id}" >${item.goods_name}</a></h3>
          </li>
         
       

          `;
        })
        $('.sp ul ol').html(str);
        
      
    })


  }
  
}






 
 
  
  
  
   

</script>
  
  
</body>
</html>
